import React, { useState, useEffect } from "react";
import "./Appa.less";
import { Tag, Input } from "antd";
export default function Appa(props) {
  const [tag, setTag] = useState([]);
  const [inputs, setInputs] = useState("");
  function log(e) {
    console.log(e);
  }
  useEffect(() => {
    let arr2 = props.value.split(/[, ，]/);
    setTag(arr2);
  }, [props.value]);

  useEffect(() => {
    props.onChange(tag);
  }, [tag]);

  function addClick() {
    let arr = inputs.split(/[, ，]/);
    console.log(arr);
    let arr1 = [...tag, ...arr];
    console.log(arr1);
    setTag(arr1);
  }
  function addChange(e) {
    setInputs(e.target.value);
  }
  return (
    <div>
      <div style={{ display: "flex" }}>
        <Input
          style={{ width: "150px" }}
          onChange={addChange}
          maxLength="500"
        ></Input>
        <div className="btn" onClick={addClick}>
          add
        </div>
      </div>
      <div>
        已输入{tag.length}还可以搞{500 - tag.length}
      </div>
      {tag?.map((item, index) => {
        return (
          <Tag closable onClose={log} key={index}>
            {item}
          </Tag>
        );
      })}
    </div>
  );
}
